<!doctype html>
<html>
	<head>
		<title>ch05_01</title>
		<link rel=stylesheet type="text/css" href="color.css">
		<script type="text/javascript">
			function onLoad() {
				if(typeof(Storage)=="undefined")
				{
					alert("Sorry!!你的浏览器不支持Web Storage");
				}else{
					var btn_save = document.getElementById("btn_save");
					var btn_load = document.getElementById("btn_load");
					var btn_clear = document.getElementById("btn_clear");
					btn_save.addEventListener("click", saveToLocalStorage);
					btn_load.addEventListener("click", loadFromLocalStorage);
					btn_clear.addEventListener("click", clearLocalStorage);
				}
			}
			function saveToLocalStorage(){
				var inputname = document.getElementById("inputname");
				window.localStorage.username = inputname.value;
			}
			function loadFromLocalStorage(){
				var show_LocalStorage = document.getElementById("show_LocalStorage");
				show_LocalStorage.innerHTML=window.localStorage.username+" 你好~欢迎来到我的网站~";
			}
			function clearLocalStorage(){
				window.localStorage.clear();
				var show_LocalStorage = document.getElementById("show_LocalStorage");
				show_LocalStorage.innerHTML=window.localStorage.username;
			}
		</script>
	</head>
	<body>
		<body onload="onLoad()">
			<img src="images/welcom.jpg" width="300" height="200" /><br />
			请输入你的姓名：<input type="text" id="inputname" value=""><br />
			<div id="show_LocalStorage"></div><br />
			<button id="btn_save">存储到 localStorage</button>
			<button id="btn_load">从 localStorage 读取数据</button>
			<button id="btn_clear">清除 localStorage 数据</button>
		</body>
	</body>
</html>